<template>
  <div class="app2-main">
    <!-- tab被切换时实时更新数据 -->
    <el-tabs type="border-card" class="root" v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="菜单授权" name="menu">
        <menu-perm v-if="tabRefresh.menu" />
      </el-tab-pane>
      <el-tab-pane label="接口授权" name="perm">
        <api-perm v-if="tabRefresh.perm" />
      </el-tab-pane>
      <el-tab-pane label="数据授权" name="data">
        <data-perm v-if="tabRefresh.data" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import menuPerm from './MenuPerm'
import apiPerm from './ApiPerm'
import dataPerm from './DataPerm'
export default {
  components: {
    menuPerm,
    apiPerm,
    dataPerm
  },
  data () {
    return {
      activeName: 'menu',
      tabRefresh: {
        menu: true,
        perm: false,
        data: false
      }
    }
  },
  methods: {
    handleTabClick (tab) {
      this.activeName = tab.name
      switch (this.activeName) {
        case 'menu':
          this.switchTab('menu')
          break
        case 'perm':
          this.switchTab('perm')
          break
        case 'data':
          this.switchTab('data')
          break
      }
    },
    switchTab (tab) {
      for (let key in this.tabRefresh) {
        if (key === tab) {
          this.tabRefresh[key] = true
        } else {
          this.tabRefresh[key] = false
        }
      }
    },
  }
}
</script>

<style lang="scss">
</style>